<template>
  <div class="q-select" 
    tabindex="-1" 
    @focus="show" 
    v-clickoutside="handleClickOutSide">
    <label v-if="qValue === ''">{{msg}}</label>
    <span class="label-span" v-else>{{msg2}}</span>
    <!--<span class="label-span" v-else>{{msg3}}</span>-->
    <!--<input type="text" placeholder="Please select a q" v-model="msg">-->
    <i class="el-icon-date clearbtn"></i>
    <el-collapse-transition>
      <div v-show="qmaskshow" class="qmask">
        <div class="tab">
          <i class="el-icon-d-arrow-left leftbtn" @click="left"></i>
          <!--<span class="qtxt">FY{{String(this.currtime-3).slice(2) + (+String(this.currtime-3).slice(2) + 1)}}-FY{{String(this.currtime).slice(2) + (+String(this.currtime).slice(2) + 1)}}</span>-->
          <span class="qtxt">{{this.currtime-3}}-{{this.currtime}}</span>
          <i class="el-icon-d-arrow-right rightbtn" @click="right"></i>
          <table class="qtable">
            <template v-for="(item,index) in qdata">
              <tr :key="index">
                <td class="thead">{{item[0]}}</td>
                <template v-for="(itemsub,indexsub) in item">
                  <td
                    :key="indexsub"
                    :class="[{nosel:itemsub < startT}, {nosel:itemsub > endT},{active:itemsub === selqdata}]"
                    @click="qclick(itemsub,item[0],indexsub)"
                    v-if="indexsub !== 0"
                  >Q{{indexsub}}</td>
                </template>
              </tr>
            </template>
          </table>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import clickoutside from "./clickoutside";

export default {
  name: "qselect",
  props: {
    value: String,
    time: Number,
    startT: Number,
    endT: Number
  },
  directives: {
    clickoutside: clickoutside
  },
  data() {
    return {
      qmaskshow: false,
      // msg: '请选择季度',
      msg2: "",
      msg3: "",
      qValue: "",
      qdata: [],
      selqdata: 0,
      currtime: 0
    };
  },
  mounted() {
    this.currtime = this.time;
    this.init();
  },
  methods: {
    handleClickOutSide() {
      this.qmaskshow = false;
    },
    init() {
      this.qdata = [];
      for (var i = this.currtime - 3; i <= this.currtime; i++) {
        this.qdata.push([
          i,
          parseInt(`${i}1`),
          parseInt(`${i}2`),
          parseInt(`${i}3`),
          parseInt(`${i}4`)
        ]);
      }
    },
    qclick(seltime, year, index) {
      // const s = this.startT;
      // const e = this.endT;
      // if (seltime >= s && seltime <= e) {
      //   this.selqdata = seltime;
      //   this.msg = `${year}Q${index}`;
      //   this.$emit('input', this.msg);
      // }
      this.selqdata = seltime;
      // this.msg = `${year}Q${index}`;
      this.msg2 = `${year}Q${index}`;
      let first = `${year}`.slice(2);
      let last = +first + 1;
      this.msg3 = `FY${first}${last}Q${index}`;
      this.qValue = `${year}0${index}`;
      this.$emit("input", this.qValue);
      this.$emit("change", this.msg2);
    },
    show() {
      this.qmaskshow = true;
    },
    left() {
      this.currtime -= 3;
      this.init();
    },
    right() {
      this.currtime += 3;
      this.init();
    }
  },
  computed: {
    msg() {
      return "filter quarter";
    }
  }
};
</script>

<style lang="scss" scoped>
.q-select {
  user-select: none;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  /*width: 195px;*/
  width: 165px;
  height: 40px;
  border: 1px solid #bfcbd9;
  background-color: #fff;
  border-radius: 4px;
  padding-left: 8px;
  outline: none;
  label {
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 530;
    line-height: 40px;
    color: #bfcbd9;
    padding-left: 10px;
    margin-left: 12px;
  }
  .label-span {
    display: inline-block;
    line-height: 40px;
    padding-left: 30px;
  }
  .clearbtn {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 30px;
    text-align: center;
    line-height: 40px;
    color: #bfcbd9;
    cursor: pointer;
  }
  .qmask {
    position: absolute;
    left: 0;
    /*top: 36px;*/
    top: 40px;
    background-color: #fff;
    width: 196px;
    height: 200px;
    border: 1px solid #d1dbe5;
    border-radius: 4px;
    z-index: 2003 !important;
    .tab {
      position: relative;
      width: 100%;
      height: 36px;
      line-height: 36px;
      text-align: center;
      font-size: 14px;
      color: #999;
      .leftbtn {
        position: absolute;
        left: 0;
        top: 0;
        height: 36px;
        width: 36px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
      }
      .rightbtn {
        position: absolute;
        right: 0;
        top: 0;
        height: 36px;
        width: 36px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
      }
      .qtxt {
        display: inline-block;
        height: 36px;
        line-height: 36px;
        color: #999;
      }
      .qtable {
        margin: 0 auto;
        td {
          cursor: pointer;
          display: inline-block;
          height: 30px;
          line-height: 30px;
          padding: 0 6px;
        }
        .thead {
          cursor: default;
        }
        .active {
          background-color: #20a0ff;
          color: #fff;
        }
        /*禁用状态*/
        /*.nosel{*/
        /*color: #bfcbd9;*/
        /*cursor: not-allowed;*/
        /*}*/
      }
    }
  }
}
</style>
